<template>
	<view>
		<scroll-list ref="list" :option="option" @refresh="refresh">
			<image :src="comeBackImg" class="come_back" @click="comeBack"></image>
			<u-swiper radius="0" height="300" :list="swiperList" @click="click"></u-swiper>
			<!-- 限时活动 -->
			<view class="limitedTime">
				<u-row justify="space-between" gutter="10">
					<u-col span="8">
						<view>
							<image :src="limitedTimeImg" class="image_19" referrerpolicy="no-referrer"/>
							<view class="speedOfProgress">
								<tn-line-progress :percent="50" activeColor="#FE0000" :height="20"
								 inactiveColor="#fff"></tn-line-progress>
							</view>
							<view class="snatched">
								已抢{{ snatchedNum }}件
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view>
							<view style="float: right;">
								距离结束还剩下
							</view>
							<view style="float: right;">
								<u-count-down
									ref="countDown"
									:time="countDown"
									format="HH:mm:ss"
									autoStart
									millisecond
									@change="onChange"
								>
									<view class="time">
										<view class="time__custom">
											<text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
										</view>
										<text class="time__doc">:</text>
										<view class="time__custom">
											<text class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>
										</view>
										<text class="time__doc">:</text>
										<view class="time__custom">
											<text class="time__custom__item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
										</view>
									</view>
								</u-count-down>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<!-- 详情 -->
			<view class="other_box">
				<view>
					<image :src="product" class="individual_image"></image>
					<view class="specifications_font">
						<view>选择</view>
						<view>规格</view>
					</view>
					<view class="container">
						<scroll-view class="product-options" scroll-x="true" :scroll-left="scrollLeft">
							<view v-for="(item, index) in products" :key="index" class="product-option">
							  <image :src="item.image" class="product-image"></image>
							</view>
						</scroll-view>
					</view>
					<text class="tn-icon-right specifications_right" @click="scrollRight"></text>
				</view>
				<view class="price_box">
					<span class="meta_symbol">￥</span>
					<span class="price">399</span>
					<span class="price_qi">起</span>
					<span class="original_price">￥689起</span>
				</view>
				<view class="title_box">
					<view>
						<tn-tag backgroundColor="#FE0000" fontColor="#FFF" :fontSize="12" style="vertical-align: top;">跨境</tn-tag>
						<span class="title">佐赫ZH100奶牛牧场机械键盘有线无线客制化女生办公麻将音静音轴</span>
					</view>
				</view>
				<view class="share_box">
					<u-row>
						<u-col span="6">
							<view class="text_center">
								<image :src="starWishesImg" class="share_icon"></image>
								<span class="share_font">星愿</span>
							</view>
						</u-col>
						<u-col span="6">
							<view class="text_center">
								<image :src="shareImg" class="share_icon"></image>
								<span class="share_font">分享</span>
							</view>
						</u-col>
					</u-row>
				</view>

				<!-- 优惠活动 -->
				<view class="logo_box">
					<image :src="logoImg" class="logo"></image>
					<span class="logo_name">兴星优选</span>
					<span class="division"></span>
					<span class="division_title">可购买运费险 七天无理由退货</span>
					<text class="tn-icon-right logo_right"></text>
				</view>
				<view class="order_box">
					<view class="oder_title_box" @click="handleGuarantee">
						<span class="order_title">星币值</span>
						<span class="order_rule">购买获得积分（1元=10星币值）</span>
						<text class="tn-icon-right logo_right"></text>
					</view>
					<view class="oder_title_box" @click="handleGuarantee">
						<span class="order_title">折单</span>
						<span class="order_rule2">本商品不支持折单</span>
						<text class="tn-icon-right logo_right"></text>
					</view>
					<view class="oder_title_box" @click="handleGuarantee">
						<span class="order_title">总限购</span>
						<span class="order_rule">不限购</span>
						<text class="tn-icon-right logo_right"></text>
					</view>
				</view>

				<!-- 星族圈 -->
				<view class="xingzu_box">
					<view class="xingzu_title_box">
						<span class="xingzu_title_font">星族圈</span>
						<image :src="xingzuTitleImg" class="xingzu_title_img"></image>
						<span class="xingzu_title_comment">来看达人种草怎么评论</span>
						<text class="tn-icon-right logo_right xingzu_margin"></text>
						<view class="xingzu_title_box2"></view>
					</view>
					<view v-for="(item, index) in xingzuList" :key="index">
						<view class="xingzu_content_padding" v-show="item.imgsList.length === 1">
							<tn-avatar :src="item.avatar" style="vertical-align: middle;"></tn-avatar>
							<span class="username">{{ item.username }}</span>
							<view style="margin-top: 6px;">
								<view class="xingzu_content">{{ item.content }}</view>
								<image :src="item.imgsList[0]" class="xingzu_one_img"></image>
							</view>
						</view>
						<view class="xingzu_content_padding" v-show="item.imgsList.length !== 1">
							<tn-avatar :src="item.avatar" style="vertical-align: middle;"></tn-avatar>
							<span class="username">{{ item.username }}</span>
							<view style="margin-top: 6px;">
								<view class="xingzu_contents">{{ item.content }}</view>
							</view>
							<u-row justify="space-between" gutter="11" style="margin-top: 10px;width: 100%;">
								<u-col span="4" v-for="(imgItem, imgIndex) in item.imgsList.slice(0,3)" :key="imgIndex">
									<image :src="imgItem" style="width: 100px;height: 100px;"></image>
								</u-col>
							</u-row>
						</view>
					</view>
				</view>

				<!-- 商品参数 -->
				<view class="parameter_box">
					<!-- <u-divider text="商品详情" textColor="#1A1A1A" lineColor="#9CA3AF"></u-divider> -->
					<view class="text_center">
						<image :src="divisionImg" class="division_img" />
					</view>
					<view class="text_center parameter_title">商品详情</view>

					<view class="xingzu_box">
						<view class="xingzu_title_box3">
							<span class="xingzu_title_font">商品参数</span>
							<view class="xingzu_title_box2"></view>
						</view>
						<view class="xingzu_content_padding">
							<table cellspacing="0" class="parameter_table">
								<tr>
									<td>规格</td>
									<td>258g/瓶*2</td>
								</tr>
							</table>
							<!-- <view class="text_center putItAway">
								<span>收起</span>
								<text class="tn-icon-up put_it_away_font"></text>
							</view> -->
							<view class="text_center putItAway">
								<span>展开</span>
								<text class="tn-icon-down put_it_away_font"></text>
							</view>
						</view>
					</view>
				</view>

				<!-- 详情图 -->
				<view class="parameter_box">
					<image v-for="(item, index) in detailedImgs" :src="item" :key="index" class="detailed_img"></image>
				</view>
			</view>
		</scroll-list>

		<view class="release_bottom">
			<view class="release_draft_box">
				<view class="release_draft_icon release_draft_icon_float">
					<image :src="homeIcon" class="draft_box_icon" @click="goTo('/pages/index/index')"></image>
					<view>首页</view>
				</view>
				<view class="release_draft_icon release_draft_icon_float">
					<view>
						<image :src="shoppingCartIcon" class="draft_box_icon"></image>
					</view>
					<view>购物车</view>
				</view>
				<view class="release_draft_icon release_draft_icon_float">
					<view>
						<image :src="customerIcon" class="draft_box_icon"></image>
					</view>
					<view>客服</view>
				</view>
			</view>
			<view class="release_draft_box3 release_draft_icon_float">
				<tn-button width="100%" height="45px" backgroundColor="#F1AC73" fontColor="#FFFFFF" :fontSize="14" @click="skuTo('加入购物车')">加入购物车</tn-button>
			</view>
			<view class="release_draft_box2">
				<tn-button width="100%" height="45px" backgroundColor="#FE0000" fontColor="#FFFFFF" :fontSize="14" @click="skuTo('立即购买')">立即购买</tn-button>
			</view>
		</view>

		<guaranteePopup :show="guaranteeShow" @close="guaranteeShow=false" />

		<!-- 多规格选择 -->
		<wu-sku
			v-model="skuShow"
			:data="skus"
			:themeColor="[254, 0, 0]"
			defaultCover="https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/default.jpeg"
			:btnConfirmText="btnConfirmText" notSelectSku="请选择完整的商品信息"
			:isMaskClose="true"
			@skuChange="skuChange"
			@confirm="skuConfirm"
		></wu-sku>
	</view>
</template>

<script>
import guaranteePopup from './components/guaranteePopup.vue';

export default {
	components: {
		guaranteePopup
	},
	data() {
		return {
			option: {
				size: 10,
				auto: false,
				safeArea: true
			},
			swiperList: [
				'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				'https://cdn.uviewui.com/uview/swiper/swiper3.png',
			],

			guaranteeShow: false,
			// 是否显示组件
			skuShow: false,
			btnConfirmText: '',
			// sku列表
			skus: [{
					id: 1,
					price: 7000,
					stock: 30,
					sku_attrs: {
						'机身颜色': '深空黑色',
						'储存容量': '128G',
						'套装': '快充套装'
					}
				},
				{
					id: 2,
					price: 8500,
					stock: 10,
					sku_attrs: {
						'机身颜色': '暗紫色',
						'储存容量': '256G',
						'套装': '快充套装'
					}
				},
				{
					id: 3,
					price: 9500,
					stock: 0,
					sku_attrs: {
						'机身颜色': '暗紫色',
						'储存容量': '512G',
						'套装': 'AirPods套装'
					}
				},
				{
					id: 4,
					price: 9200,
					stock: 60,
					sku_attrs: {
						'机身颜色': '银色',
						'储存容量': '512G',
						'套装': 'AirPods套装'
					}
				},
				{
					id: 5,
					price: 9200,
					stock: 80,
					sku_attrs: {
						'机身颜色': '金色',
						'储存容量': '512G',
						'套装': 'AirPods3套装'
					}
				}
			],

			snatchedNum: 8976,
			countDown: 60 * 60 * 1000,
			timeData: {},
			comeBackImg: require('@/pages/users/static/commodity/comeBack.png'),
			product: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
			starWishesImg: require('@/pages/users/static/commodity/startWishes.png'),
			starWishesSelectImg: require('@/pages/users/static/commodity/starWishesSelectImg.png'),
			xingzuTitleImg: require('@/pages/users/static/commodity/recommend.png'),
			shareImg: require('@/pages/users/static/commodity/share.png'),
			limitedTimeImg: require('@/pages/users/static/commodity/limitedTime.png'),
			divisionImg: require('@/pages/users/static/commodity/division.png'),
			detailedImgs: ['https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/08065705a78e4b04939cc0f6c9d999f9_mergeImage.png'],
			homeIcon: require('@/pages/users/static/commodity/home.png'),
			shoppingCartIcon: require('@/pages/users/static/commodity/shoppingCart.png'),
			customerIcon: require('@/pages/users/static/commodity/customer.png'),
			products: [
				  { image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' },
				  { image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png' },
				  { image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png' },
				  { image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' },
				  { image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png' },
				  { image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' },
				  { image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png' },
				  { image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png' },
			],
			scrollLeft: 0, // 初始滚动位置
			logoImg: require('@/pages/users/static/commodity/commodityLogo.png'),
			xingzuList: [
				{
					id: 1,
					avatar: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					username: '西**8',
					content: '来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论',
					imgsList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png']
				},
				{
					id: 2,
					avatar: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					username: 'S**c',
					content: '来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论来看达人种草怎么评论',
					imgsList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper3.png']
				},
			],
		}
	},
	mounted() {
		this.$refs.countDown.start()
	},
	methods: {
		comeBack() {
			uni.navigateBack({
				delta: 1
			})
		},
		// sku发生改变事件, 选择完整的sku则回返回 否则sku的值为{}
		skuChange(sku) {
			console.log(sku);
		},
		// sku确认事件
		skuConfirm(e) {
			console.log(e);
		},
		onChange(e) {
			this.timeData = e
		},
		scrollRight() {
			// 每次点击按钮，滚动视图向右移动一定距离
			this.scrollLeft += 50; // 假设每次滚动200px
		},
		refresh(paging) {

		},
		skuTo(text) {
			this.skuShow=true;
			this.btnConfirmText = text;
		},
		// sku发生改变事件, 选择完整的sku则回返回 否则sku的值为{}
		skuChange(sku) {
			console.log(sku);
		},
		// sku确认事件
		skuConfirm(e) {
			console.log(e);
			if(this.btnConfirmText === '立即购买') {
				uni.navigateTo({
					url: '/pages/users/commodity/confirmOrder'
				})
			}
		},
		handleGuarantee() {
			this.guaranteeShow = true;
		},
	}
}
</script>

<style lang="scss" scoped>
.come_back {
	width: 32px;
	height: 32px;
	position: absolute;
	z-index: 1;
	margin: 10px;
}
.limitedTime {
	width: 100%;
	height: 75px;
	border-radius: 9px 9px 0px 0px;
	background: #FFD7D7;
	margin-top: -10px;
	position: relative;
	padding: 12px 18px;
}
.image_19 {
   width: 100px;
   height: 18px;
}
.speedOfProgress {
	margin-top: 9px;
	width: 66%;
	float: left;
}
.snatched {
	float: right;
	margin-top: 8px;
	color: #1A1A1A;
	font-size: 12px;
}

/** 倒计时 **/
.time {
    @include flex;
    align-items: center;

    &__custom {
         margin-top: 4px;
         width: 22px;
         height: 22px;
         background-color: #FE0000;
         border-radius: 4px;
         /* #ifndef APP-NVUE */
         display: flex;
         /* #endif */
         justify-content: center;
         align-items: center;

        &__item {
             color: #fff;
             font-size: 12px;
             text-align: center;
         }
    }

    &__doc {
         color: #FE0000;
         padding: 0px 4px;
     }

    &__item {
         color: #606266;
         font-size: 15px;
         margin-right: 4px;
     }
}

.other_box {
	width: 100%;
	background-color: #F4F4F4;
	border-radius: 9px 9px 0px 0px;
	margin-top: -10px;
	position: relative;
	z-index: 2;
	padding: 12px 15px;
	padding-bottom: 100px;
}


.container {
    display: flex;
    flex-direction: column;
	float: left;
	width: 70%;
}
.product-options {
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
}
.product-option {
    display: inline-block;
    width: 40px; /* 根据需要调整宽度 */
    height: 40px; /* 根据需要调整高度 */
    vertical-align: top;
}
.product-option:not(:first-child) {
	margin-left: 10px;
}
.product-image {
    width: 100%;
    height: 100%;
	border-radius: 4px;
}
.next-button {
    margin-top: 10px;
}

.individual_image {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	border: 2px solid #09B1B1;
	float: left;
}
.specifications_right {
	color: #1E1E1E;
	float: right;
	font-size: 21px;
	line-height: 40px;
}
.specifications_font {
	float: left;
	margin: 5px 6px;
	color: #808080;
	font-size: 12px;
}
.original_price {
	text-decoration: line-through;
	color: #808080;
	font-size: 12px;
	margin-left: 9px;
}
.price_box {
	clear: both;
	padding: 10px 0;
}
.meta_symbol {
	color: #000000;
	font-size: 14px;
}
.price {
	color: #000000;
	font-weight: bold;
	font-size: 28px;
}
.price_qi {
	margin-left: 4px;
	color: #000000;
	font-size: 12px;
}
.title {
	color: #1A1A1A;
	font-size: 18px;
	font-weight: bold;
	margin-left: 10px;
}
.share_box {
	padding: 12px 0;
}
.share_icon {
	width: 20px;
	height: 20px;
	vertical-align: middle;
}
.share_font {
	margin-left: 10px;
	font-size: 14px;
	color: #FE0000;
	font-weight: bold;
}
.text_center {
	text-align: center;
}
.logo_box {
	padding: 6px 9px;
	width: 100%;
	background-color: white;
	border-radius: 8px;
}
.logo {
	width: 25px;
	height: 23px;
	vertical-align: middle;
}
.logo_name {
	color: #1A1A1A;
	font-size: 14px;
	margin-left: 5px;
	font-weight: bold;
}
.division {
	width: 1px;
	height: 19px;
	border: 1px solid #E3E4E5;
	margin: 0 12px;
}
.division_title {
	color: #1A1A1A;
	font-size: 14px;
}
.logo_right {
	float: right;
	font-size: 14px;
	line-height: 23px;
	color: #9EA5B1;
}
.order_box {
	margin-top: 10px;
	width: 100%;
	padding: 15px 12px 0 12px;
	background-color: white;
	border-radius: 8px;
}
.order_title {
	width: 42px;
	font-size: 14px;
	color: #808080;
}
.order_rule {
	color: #1A1A1A;
	font-size: 14px;
	margin-left: 14px;
}
.order_rule2 {
	color: #1A1A1A;
	font-size: 14px;
	margin-left: 28px;
}
.oder_title_box {
	padding-bottom: 14px;
}
.oder_title_box:not(:first-child) {
	padding: 14px 0;
}
.oder_title_box:not(:last-child) {
	border-bottom: 1px solid #E3E4E5;
}
.xingzu_box {
	border-radius: 8px;
	margin-top: 14px;
	border: 1px solid transparent;
	background-clip: padding-box, border-box;
	background-origin: padding-box, border-box;
	background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(180deg, rgba(254, 0, 0, 1), rgba(255, 255, 255, 1));
}
.xingzu_title_box {
	font-size: 16px;
	color: #1A1A1A;
	font-weight: bold;
	border-bottom: 1px solid #E3E4E5;
}
.xingzu_title_box3 {
	font-size: 16px;
	color: #1A1A1A;
	font-weight: bold;
}
.xingzu_title_box2 {
	border-radius: 8px 8px 0 0;
	position: relative;
	width: 100%;
	background: linear-gradient( 180deg, #FE0000 0%, rgba(255,255,255,0) 100%);
	opacity: 0.08;
	height: 40px;
	padding: 9px 10px;
	font-size: 16px;
	color: #1A1A1A;
	z-index: 1;
}
.xingzu_title_font {
	z-index: 2;
	position: absolute;
	line-height: 40px;
	margin-left: 10px;
	font-weight: bold;
}
.xingzu_title_img {
	position: absolute;
	width: 10px;
	height: 12px;
	margin-top: 14px;
	margin-left: 70px;
}
.xingzu_title_comment {
	position: absolute;
	color: #F1AC73;
	font-size: 12px;
	line-height: 40px;
	margin-left: 85px;
}
.xingzu_margin {
	line-height: 40px;
	margin-right: 10px;
}
.username {
	color: #1A1A1A;
	font-size: 12px;
	margin-left: 6px;
}
.xingzu_content {
	width: calc(100% - 53px);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 13px;
	color: #1A1A1A;
	font-weight: 400;
	line-height: 20px;
}
.xingzu_one_img {
	width: 40px;
	height: 40px;
	float: right;
	margin-top: -40px;
}
.xingzu_content_padding {
	padding: 10px;
}
.xingzu_content_padding:not(:last-child) {
	border-bottom: 1px solid #E3E4E5;
}
.xingzu_contents {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.parameter_box {
	width: 100%;
}
.parameter_table {
	width: 100%;
	background-color: #F9F9F9;
	tr {
		td:first-child {
			border: 2px solid #fff;
			width: 35%;
			padding: 11px 10px;
		}
		td:last-child {
			border: 2px solid #fff;
			width: 65%;
			padding: 11px 10px;
		}
	}
}
.parameter_title {
	margin-top: -14px;
	color: #1A1A1A;
	font-size: 14px;
	padding-bottom: 5px;
}
.division_img {
	width: 150px;
	height: 1px;
	margin-top: 30px;
}
.putItAway {
	padding: 8px 0 0 0;
	border-top: 1px solid #C4F7F7;
	margin-top: 5px;
	span {
		color: #808080;
		font-size: 12px;
	}
}
.put_it_away_font {
	font-size: 14px;
	margin-left: 6px;
}
.detailed_img {
	width: 100%;
	margin-top: 10px;
}

.release_bottom {
	border-top: 0.5px solid #EBEBEB;
	background-color: #FFFFFF;
	width: 100%;
	height: 70px;
	margin:0 auto;
	overflow:hidden;
	position: fixed;
	bottom:0;
}
.release_draft_box {
	margin-top: 25px;
	margin-left: 20px;
}
.release_draft_box2 {
	width: 32%;
	margin-top: -45px;
	float: right;
	margin-left: 8px;
	padding-right: 13px;
}
.release_draft_box3 {
	width: 27%;
	margin-top: -13px;
	padding-right: 8px;
}
.draft_box_icon {
	width: 24px;
	height: 24px;
	vertical-align: middle;
}
.release_draft_icon {
	text-align: center;
	margin-right: 16px;
	color: #000000;
	font-size: 10px;
	margin-top: -10px;
}
.release_draft_icon_float {
	float: left;
}
</style>
